<template>
  <div class="download-item" :class="statusClass">
    <div class="item-header">
      <div class="file-info">
        <div class="file-icon" :class="statusClass">
          <svg v-if="download.status === 'completed'" viewBox="0 0 24 24" fill="none">
            <path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <svg v-else-if="download.status === 'error'" viewBox="0 0 24 24" fill="none">
            <path d="M12 8V12M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <svg v-else viewBox="0 0 24 24" fill="none">
            <path d="M12 3V15M12 15L8 11M12 15L16 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </div>
        <div class="file-details">
          <h3 class="filename">{{ download.filename }}</h3>
          <p class="file-path">{{ download.savePath }}</p>
        </div>
      </div>
      
      <div class="item-actions">
        <button 
          v-if="download.status === 'downloading'" 
          @click="$emit('pause', download.id)"
          class="action-btn pause-btn"
          title="暂停"
        >
          <svg viewBox="0 0 24 24" fill="none">
            <rect x="6" y="4" width="4" height="16" fill="currentColor"/>
            <rect x="14" y="4" width="4" height="16" fill="currentColor"/>
          </svg>
        </button>
        
        <button 
          v-if="download.status === 'paused'" 
          @click="$emit('resume', download.id)"
          class="action-btn resume-btn"
          title="继续"
        >
          <svg viewBox="0 0 24 24" fill="none">
            <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
          </svg>
        </button>
        
        <button 
          v-if="download.status === 'downloading' || download.status === 'paused'" 
          @click="$emit('cancel', download.id)"
          class="action-btn cancel-btn"
          title="取消"
        >
          <svg viewBox="0 0 24 24" fill="none">
            <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2"/>
          </svg>
        </button>
        
        <button 
          v-if="download.status === 'completed' || download.status === 'error'" 
          @click="$emit('remove', download.id)"
          class="action-btn remove-btn"
          title="移除"
        >
          <svg viewBox="0 0 24 24" fill="none">
            <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2"/>
          </svg>
        </button>
      </div>
    </div>

    <div class="progress-section" v-if="download.status !== 'completed'">
      <div class="progress-bar">
        <div 
          class="progress-fill" 
          :style="{ width: progressPercentage + '%' }"
        ></div>
      </div>
      
      <!-- 速度图表 -->
      <SpeedChart 
        v-if="download.status === 'downloading'"
        :speed="download.progress.speed || 0"
        class="speed-chart"
      />
      
      <div class="progress-stats">
        <div class="stat">
          <span class="stat-label">进度</span>
          <span class="stat-value">{{ progressPercentage.toFixed(1) }}%</span>
        </div>
        <div class="stat">
          <span class="stat-label">分片</span>
          <span class="stat-value">
            {{ download.progress.shards.downloaded }} / {{ download.progress.shards.required }}
            <span v-if="download.rsConfig" class="rs-badge">RS</span>
          </span>
        </div>
        <div class="stat">
          <span class="stat-label">速度</span>
          <span class="stat-value">{{ formatSpeed(download.progress.speed) }}</span>
        </div>
        <div class="stat">
          <span class="stat-label">剩余时间</span>
          <span class="stat-value">{{ formatETA(download.progress.eta) }}</span>
        </div>
        <div class="stat">
          <span class="stat-label">大小</span>
          <span class="stat-value">
            {{ formatSize(download.progress.downloaded) }} / {{ formatSize(download.progress.total) }}
          </span>
        </div>
      </div>
    </div>

    <div v-if="download.status === 'error'" class="error-message">
      ⚠️ {{ download.error }}
    </div>

    <div v-if="download.status === 'completed'" class="completed-message">
      ✅ 下载完成 - {{ formatSize(download.progress.total) }}
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import SpeedChart from './SpeedChart.vue';

const props = defineProps({
  download: {
    type: Object,
    required: true
  }
});

defineEmits(['pause', 'resume', 'cancel', 'remove']);

const statusClass = computed(() => {
  return `status-${props.download.status}`;
});

const progressPercentage = computed(() => {
  return props.download.progress?.percentage || 0;
});

const formatSize = (bytes) => {
  if (!bytes) return '0 B';
  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
  const k = 1024;
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + units[i];
};

const formatSpeed = (bytesPerSecond) => {
  if (!bytesPerSecond) return '0 B/s';
  return formatSize(bytesPerSecond) + '/s';
};

const formatETA = (seconds) => {
  if (seconds < 0) return '--';
  if (seconds < 60) return seconds + ' 秒';
  if (seconds < 3600) return Math.floor(seconds / 60) + ' 分钟';
  return Math.floor(seconds / 3600) + ' 小时';
};
</script>

<style scoped>
.download-item {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.75rem;
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.download-item:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.file-info {
  display: flex;
  gap: 1rem;
  flex: 1;
}

.file-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 212, 255, 0.1);
  flex-shrink: 0;
}

.file-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: #00d4ff;
}

.file-icon.status-completed {
  background: rgba(0, 255, 136, 0.1);
}

.file-icon.status-completed svg {
  color: #00ff88;
}

.file-icon.status-error {
  background: rgba(255, 68, 68, 0.1);
}

.file-icon.status-error svg {
  color: #ff4444;
}

.file-details {
  flex: 1;
  min-width: 0;
}

.filename {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: #e0e0e0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-path {
  font-size: 0.8rem;
  margin: 0;
  color: #a0a0a0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.pause-btn {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

.pause-btn:hover {
  background: rgba(255, 193, 7, 0.2);
}

.resume-btn {
  background: rgba(0, 212, 255, 0.1);
  color: #00d4ff;
}

.resume-btn:hover {
  background: rgba(0, 212, 255, 0.2);
}

.cancel-btn, .remove-btn {
  background: rgba(255, 68, 68, 0.1);
  color: #ff4444;
}

.cancel-btn:hover, .remove-btn:hover {
  background: rgba(255, 68, 68, 0.2);
}

.progress-section {
  margin-top: 1rem;
}

.speed-chart {
  margin-bottom: 1rem;
}

.progress-bar {
  height: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.25rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4ff 0%, #7b2ff7 100%);
  transition: width 0.3s ease;
  border-radius: 0.25rem;
}

.progress-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-label {
  font-size: 0.75rem;
  color: #a0a0a0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #e0e0e0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rs-badge {
  font-size: 0.65rem;
  padding: 0.125rem 0.375rem;
  background: rgba(123, 47, 247, 0.2);
  border: 1px solid rgba(123, 47, 247, 0.4);
  border-radius: 0.25rem;
  color: #b794f6;
}

.error-message, .completed-message {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.error-message {
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid rgba(255, 68, 68, 0.3);
  color: #ff4444;
}

.completed-message {
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: #00ff88;
}
</style>


